<template>
  <div class="buysteps container">
    <el-steps :active="activenum" finish-status="success" simple style="margin-top: 8px;font-size: 14px">
      <el-step title="完成订单信息"></el-step>
      <el-step title="收银台" ></el-step>
    </el-steps>
    <div class="ddinfo">
      <div class="cont" >
        <div class="head">
          <p>订单信息</p>
        </div>
        <p class="p1">订单号：{{this.$route.query.ddh}}</p>
        <p class="p1">总金额：<span>￥{{this.$route.query.ddjg}}</span></p>
        <div class="paybtn">
          <div class="sure" @click="alipay()" v-if="!iswx">支付宝付款</div>
          <div class="sure" @click="wechatpay()">微信付款</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import wx from 'weixin-js-sdk'
import ban1 from '@/assets/image/ban1.jpg';
import cp1 from '@/assets/image/cp1.jpg';
import qs from "qs"
import store from '@/vuex/store'
export default {
  name: 'App',
  data(){
    return{
      activenum:1,
      index: 0,
      ewm:'',
      dd:false,
      iswx: false
    }
  },
  methods:{
    isWeiXin:function() {
      var ua = window.navigator.userAgent.toLowerCase();
      console.log(ua);//mozilla/5.0 (iphone; cpu iphone os 9_1 like mac os x) applewebkit/601.1.46 (khtml, like gecko)version/9.0 mobile/13b143 safari/601.1
      if (ua.match(/MicroMessenger/i) == 'micromessenger') {
        this.iswx = true;
      return true;
      
      } else {
        this.iswx = false;
      return false;
      
      }
    },
    getconfig:function(){
      var url = window.location.href;
      console.log(url)
      this.$http.post("/index.php/user/code/getSignPackage",qs.stringify({
              // mobile:this.tel,
              // password:this.pwd
              url:url

            }))
            .then(res => {
              console.log(res)
              wx.config({
                  debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                  appId: res.data.appId, // 必填，公众号的唯一标识
                  timestamp: res.data.timestamp, // 必填，生成签名的时间戳
                  nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
                  signature: res.data.signature,// 必填，签名
                  jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表
              });

            })
            .catch(error => {
              alert("网络错误")
            });
    },
    wechatpay:function(){
        if(this.isWeiXin()){
          
          console.log(localStorage['openid'])
            console.log(" 是来自微信内置浏览器")
            this.$http.post("/index.php/user/order/WXmobilePay",qs.stringify({
              // mobile:this.tel,
              // password:this.pwd
              order_number: this.$route.query.ddh,
              openid: localStorage['openid']

            }))
            .then(res => {
              console.log(res)
                wx.chooseWXPay({
                  timestamp: res.data.timeStamp,
                  nonceStr: res.data.nonceStr,
                  package: res.data.package,
                  signType: 'MD5', // 注意：新版支付接口使用 MD5 加密SHA1
                  paySign: res.data.paySign,
                  success: function (res) {
                      console.log(res)
                  }
                });
            })
            .catch(error => {
              alert("网络错误")
            });
            
          }else{
            console.log(" 不是来自微信内置浏览器")
            this.$http.post("/index.php/user/order/mobilePay",qs.stringify({
              // mobile:this.tel,
              // password:this.pwd
              order_number: this.$route.query.ddh

            }))
            .then(res => {
              console.log(res.data)
              window.location.href = res.data
            })
            .catch(error => {
              alert("网络错误")
            });
          }
    },
    alipay:function(){
      
        this.$http.post("/index.php/user/order/alipayMobilePay",qs.stringify({
          // mobile:this.tel,
          // password:this.pwd
          order_number: this.$route.query.ddh

        }))
        .then(res => {
          console.log(res.data)
          window.location.href = res.data
        })
        .catch(error => {
          alert("网络错误")
        });
    },
    getinfo:function(){
      this.$http.post("/index.php/user/order/pay",qs.stringify({
          // mobile:this.tel,
          // password:this.pwd
          order_number: this.$route.query.ddh

      }))
      .then(res => {
        console.log(res)
        this.index = 1;
        this.ewm = res.data
        if(this.dd == false){
          this.qrcode();
          this.dd = true;
          this.fscheked();
        }else{
          return
        }
      })
      .catch(error => {
        alert("网络错误")
      });
      
    },
    fscheked:function(){

      var Interval = setInterval(()=>{
        this.$http.post("/index.php/user/order/query_order",qs.stringify({
            // mobile:this.tel,
            // password:this.pwd
            order_number: this.$route.query.ddh

        }))
        .then(res => {
          // console.log(res)
          console.log(res.data.row.trade_state_desc)
          if(res.data.row.trade_state_desc=='支付成功'){
            clearInterval(Interval)
            this.$alert('可以去个人订单查看信息', '支付成功！', {
              confirmButtonText: '确定',
              callback: action => {
                
              }
            });
            this.index = 0;
          }

        })
        .catch(error => {
          alert("网络错误")
        });
      },1000);

    },
    qrcode:function() {
      const that =this;
      console.log(that.ewm);
      let qrcode = new QRCode('qrcode', {
        width: 200,
        height: 200, // 高度
        text: that.ewm //'weixin://wxpay/bizpayurl?pr=Py2ThBl' // 二维码内容
        // render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
        // background: '#f0f'
        // foreground: '#ff0'
      })
      console.log(qrcode)
    },
    dj:function(){
      this.index = 0;
    }

  },
  components:{
    
  },
  computed:{
      
  },
  filters: {
    
  },
  mounted(){
      
  },
  created(){
    this.getconfig();
    this.isWeiXin();
  },
  watch:{
    '$route' (to, from) {
                // this.getinfo()
               //   const toDepth = to.path.split('/').length
                // const fromDepth = from.path.split('/').length
                // this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
                // console.log(to.name)
                
                if(to.path == '/buypage'){
                  this.isWeiXin();
                }
              }
  }
}
</script>

<style scoped lang="less">
.buysteps{
  margin-top: 3px;
  height: auto;
  zoom: 1;
  overflow: hidden;
}

.fixed{
  position: fixed;
  z-index: 99999999;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.7);
  left: 0;
  top: 0;
  display: none;
  .fffbox{
    i{
      font-size: 18px;
      font-weight: bold;
      color: #333;
      padding-top: 10px;
      padding-right: 10px;
      cursor: pointer;
    }
    text-align: right;
    background: #fff;
    width: 300px;
    height: 300px;
    position: absolute;
    left: 50%;
    margin-left: -150px;
    top: 50%;
    margin-top: -150px;
    z-index: 1;
    div{
      margin-left: 50px;
      margin-top: 14px;
    }
    p{
      font-size: text-align;
      font-size: 16px;
      color: #333;
      margin-top: 16px;
      display: block;
      text-align: center;
    }
  }
  
}
.active{
  display: block;
}
.ddinfo{
  width: 100%;
  height: auto;
  float: left;
  box-sizing: border-box;
  border: 1px solid #d6d6d6;
  margin-top: 20px;
  margin-bottom: 50px;
  .cont{
      text-align: left;
      padding: .2rem;
      .head{
        width: 100%;
        height: auto;
        border-bottom: 1px solid #d3d3d3;
        p{
          font-size: .26rem;
          font-weight: bold;
          padding-bottom: 10px;
        }
      }
      .p1{
        display: block;
        font-size: 14px;
        color: #333;
        padding-top: 14px;
        span{
          font-size: 16px;
          color: #f31936;
          font-weight: bold;
        }
      }
      .paybtn{
        width: 100%;
        margin-top: 14px;
        .sure{
          width: 110px;
          height: 40px;
          cursor:pointer;
          background: #108ee9;
          color: #fff;
          text-align: center;
          line-height: 40px;
          font-size: 14px;
          margin-top: 4px;
          float: left;
          margin-bottom: 14px;
          margin-right: 14px;
          &:last-child{
            background: #62b900;
          }
        }
      }
      
  }
}

</style>
